<template>
  <xn-form-container
    :title="formData.ID ? '编辑用户' : '新增用户'"
    :width="500"
    :visible="visible"
    :destroy-on-close="true"
    @close="onClose"
  >
    <a-form ref="formRef" :model="formData" :rules="formRules">
      <a-form-item label="用户名称" name="UserName" v-if="!formData.ID">
        <a-input
          v-model:value="formData.UserName"
          placeholder="请输入用户名称"
          allow-clear
        />
      </a-form-item>
      <a-form-item label="角色" name="RoleID">
        <a-select
              v-model:value="formData.RoleID"
              style="width: 100%"
              placeholder="请选择用户角色"
              :options="formRoleList"
            ></a-select>
      </a-form-item>
      <a-form-item label="部门" name="DeptID">
        <a-select
              v-model:value="formData.DeptID"
              style="width: 100%"
              placeholder="请选择部门"
              :options="deptmgrList"
            ></a-select>
      </a-form-item>
      <a-form-item label="是否启用" name="IsEnable">
        <a-switch
          :checked="formData.IsEnable === 1"
          @click="changeEnable($event)"
        />
      </a-form-item>
      <a-form-item label="用户说明" name="UserDesp">
        <a-input
          v-model:value="formData.UserDesp"
          placeholder="请输入用户说明"
          allow-clear
        />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button class="xn-mr8 mr10" @click="onClose">关闭</a-button>
      <a-button type="primary" @click="onSubmit">{{
        formData.ID ? "确认修改" : "确认新增"
      }}</a-button>
    </template>
  </xn-form-container>
</template>

<script setup>
import { required } from "@/utils/formRules";
import usermgrApi from "@/api/systemManagement/usermgrApi";
import { ref, watch } from "vue";
import XnFormContainer from "@/components/XnFormContainer/index.vue";
import { message } from "ant-design-vue";
let props = defineProps({
  deptmgrList: Array,
  formRoleList: Array,
});
// 默认是关闭状态
const visible = ref(false);
const emit = defineEmits({ successful: null });
const formRef = ref();

// 表单数据
const formData = ref({});
// 打开抽屉
const onOpen = (record) => {
  visible.value = true;
  if (record) {
    formData.value = Object.assign({}, record);
  } else {
    formData.value = {
      IsEnable: 0,
    };
  }
};
// 关闭抽屉
const onClose = () => {
  formRef.value.resetFields();
  visible.value = false;
};

// 默认要校验的
let formRules = ref({});

// 监听visible的变化，如果变为true，则改变校验规则

watch(
  () => visible.value,
  (n, o) => {
    if (!n) {
      return;
    }
    // 有id表示是编辑,不要校验用户名
    if (formData.value.ID) {
      formRules.value = {
        RoleID: [required("请输入角色ID")],
        DeptID: [required("请输入部门ID")],
      };
      return;
    }
    formRules.value = {
      RoleID: [required("请输入角色ID")],
      DeptID: [required("请输入部门ID")],

      UserName: [required("请输入用户名称")],
    };
  }
);

// 验证并提交数据
const onSubmit = () => {
  // 有id为编辑,无id为新增
  if (!formData.value.ID) {
    formRef.value
      .validate()
      .then(() => {
        usermgrApi
          .addUser({
            ID: formData.value.ID,
            UserName: formData.value.UserName,
            RoleID: formData.value.RoleID,
            DeptID: formData.value.DeptID,
            IsEnable: formData.value.IsEnable,
            UserDesp: formData.value.UserDesp,
          })
          .then(() => {
            message.success("新增成功");
            onClose();
            emit("successful");
          });
      })
      .catch(() => {});
    return;
  }
  formRef.value
    .validate()
    .then(() => {
      usermgrApi
        .modifyUser({
          ID: formData.value.ID,
          UserName: formData.value.UserName,
          RoleID: formData.value.RoleID,
          DeptID: formData.value.DeptID,
          IsEnable: formData.value.IsEnable,
          UserDesp: formData.value.UserDesp,
        })
        .then(() => {
          message.success("修改成功");
          onClose();
          emit("successful");
        });
    })
    .catch(() => {});
};
const changeEnable = (e) => {
  formData.value.IsEnable = e ? 1 : 0;
};

// 调用这个函数将子组件的一些数据和方法暴露出去
defineExpose({
  onOpen,
});
</script>
